
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>用户主页</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="full-screen" content="yes"/>
    <meta name="browsermode" content="application"/>
    <meta name="x5-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="x5-page-mode" content="app"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"/>
    

    <link rel="stylesheet" href="./resources/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./resources/css/bootstrap-vue.min.css"/>

    <link rel="stylesheet" href="./resources/files/assets/pages/waves/css/waves.min.css" type="text/css" media="all">
    <link rel="stylesheet" type="text/css" href="./resources/files/assets/icon/themify-icons/themify-icons.css">
    <link rel="stylesheet" type="text/css" href="./resources/files/assets/icon/font-awesome/css/font-awesome.min.css"> 
    <link rel="stylesheet" type="text/css" href="./resources/files/assets/css/style.css">
    <!-- <link rel="stylesheet" type="text/css" href="./resources/files/assets/css/jquery.mCustomScrollbar.css"> -->
    <style type="text/css">
		 @media screen and (max-width: 980px) {
		  .iframe100 {
				display: block; /* iframes are inline by default */
				background: #000;
				border: none; /* Reset default border */
				width: 100%;   /* vh,vw*/
				height: 100vh; /* Viewport-relative units */
		  }
		}
    </style>
</head>
<body>

<div class="theme-loader">
<div class="loader-track">
<div class="preloader-wrapper">
<div class="spinner-layer spinner-blue">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-yellow">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-green">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>

<div id="pcoded" class="pcoded">
<div class="pcoded-overlay-box"></div>
<div class="pcoded-container navbar-wrapper">

<nav class="navbar header-navbar pcoded-header" id="nav">
	<div class="navbar-wrapper">
	<div class="navbar-logo">
	<a class="mobile-menu waves-effect waves-light" id="mobile-collapse" href="#!">
	<i class="ti-menu"></i>
	</a>
	<div class="mobile-search waves-effect waves-light">
	<div class="header-search">
	<div class="main-search morphsearch-search">
	<div class="input-group">
	<span class="input-group-prepend search-close"><i class="ti-close input-group-text"></i></span>
	<input type="text" class="form-control" placeholder="Enter Keyword">
	<span class="input-group-append search-btn"><i class="ti-search input-group-text"></i></span>
	</div>
	</div>
	</div>
	</div>
	<a href="index.html">
	<img class="img-fluid" src="./resources/files/assets/images/logo.png" alt="Theme-Logo" />
	</a>
	<a class="mobile-options waves-effect waves-light">
	<i class="ti-more"></i>
	</a>
	</div>
	<div class="navbar-container container-fluid">
	<ul class="nav-left">
	<li>
	<div class="sidebar_toggle"><a href="javascript:void(0)"><i class="ti-menu"></i></a></div>
	</li>
	<li class="header-search">
	<div class="main-search morphsearch-search">
	<div class="input-group">
	<span class="input-group-prepend search-close"><i class="ti-close input-group-text"></i></span>
	<input type="text" class="form-control" placeholder="Enter Keyword">
	<span class="input-group-append search-btn"><i class="ti-search input-group-text"></i></span>
	</div>
	</div>
	</li>
	<li>
	<a href="#!" onclick="javascript:toggleFullScreen()" class="waves-effect waves-light">
	<i class="ti-fullscreen"></i>
	</a>
	</li>
	</ul>
	<ul class="nav-right">
	<li class="header-notification">
	<a href="#!" class="waves-effect waves-light">
	<i class="ti-bell"></i>
	<span class="badge bg-c-red"></span>
	</a>
	<ul class="show-notification">
	<li>
	<h6>通知</h6>
	<label class="label label-danger">New</label>
	</li>
	<li class="waves-effect waves-light">
	<div class="media">
	<img class="d-flex align-self-center img-radius" src="./resources/files/assets/images/avatar-2.jpg" alt="Generic placeholder image">
	<div class="media-body">
	<h5 class="notification-user">管理员</h5>
	<p class="notification-msg">Lorem ipsum dolor sit amet, consectetuer elit.</p>
	<span class="notification-time">30 minutes ago</span>
	</div>
	</div>
	</li>
	
	
	</ul>
	</li>
	
	
	
	<li class="user-profile header-notification">
	<a href="#!" class="waves-effect waves-light">
	<img src="./resources/files/assets/images/head1.jpg" class="img-radius" alt="User-Profile-Image">
	<span>{{user.username}}</span>
	<i class="ti-angle-down"></i>
	</a>
	<ul class="show-notification profile-notification">
	
	<li class="waves-effect waves-light">
	<a href="user-profile.html">
	<i class="ti-user"></i> 设置
	</a>
	</li>
	
	<li class="waves-effect waves-light">
	<a href="#" @click="logout">
	<i class="fa fa-sign-out"></i> 登出
	</a>
	</li>
	</ul>
	</li>
	
	
	
	</ul>
	</div>
	</div>
</nav>



<div class="showChat_inner">
<div class="media chat-inner-header">
<a class="back_chatBox">
<i class="fa fa-chevron-left"></i> Josephin Doe
</a>
</div>
<div class="media chat-messages">
<a class="media-left photo-table" href="#!">
<img class="media-object img-radius img-radius m-t-5" src="./resources/files/assets/images/avatar-3.jpg" alt="Generic placeholder image">
</a>
<div class="media-body chat-menu-content">
<div class="">
<p class="chat-cont">I'm just looking around. Will you tell me something about yourself?</p>
<p class="chat-time">8:20 a.m.</p>
</div>
</div>
</div>
<div class="media chat-messages">
<div class="media-body chat-menu-reply">
<div class="">
<p class="chat-cont">I'm just looking around. Will you tell me something about yourself?</p>
<p class="chat-time">8:20 a.m.</p>
</div>
</div>
<div class="media-right photo-table">
<a href="#!">
<img class="media-object img-radius img-radius m-t-5" src="./resources/files/assets/images/avatar-4.jpg" alt="Generic placeholder image">
</a>
</div>
</div>
<div class="chat-reply-box">
<div class="right-icon-control">
<form class="form-material">
<div class="form-group form-primary">
<input type="text" name="footer-email" class="form-control" required="">
<span class="form-bar"></span>
<label class="float-label"><i class="fa fa-search m-r-10"></i>Share Your Thoughts</label>
</div>
</form>
<div class="form-icon ">
<button class="btn btn-success btn-icon  waves-effect waves-light">
<i class="fa fa-paper-plane "></i>
</button>
</div>
</div>
</div>
</div>

<div class="pcoded-main-container" id="app">
<div class="pcoded-wrapper">
<nav class="pcoded-navbar" >
<div class="sidebar_toggle"><a href="#"><i class="icon-close icons"></i></a></div>
<div class="pcoded-inner-navbar main-menu">

<div class="">
	<div class="main-menu-header">
	<img class="img-80 img-radius" src="./resources/files/assets/images/head1.jpg" alt="User-Profile-Image">
	
	<div class="user-details">
	 <span id="more-details"><i class="fa fa-user"></i>&nbsp;{{user.username}} </span>
	</div>
	</div>
</div> 






<div class="pcoded-navigation-label"></div>
<ul class="pcoded-item pcoded-left-item">
		<li  :class="[{'active': obj.isActive },{'pcoded-hasmenu': obj.hasChildren } ]"    v-for="(obj,index) in menus"> 
			<template v-if="obj.hasChildren"><!-- 含有子菜单 -->
				<a href="javascript:void(0)" class="waves-effect waves-dark">
					<span class="pcoded-micon"><i :class="obj.icon"></i><b>D</b></span>
					<span class="pcoded-mtext">{{obj.name}}</span>
					<span class="pcoded-mcaret"></span>
				</a>
				<ul  class="pcoded-submenu">
					<li class="" v-for="(obj1,index1) in obj.children">
						<a href="#" class="waves-effect waves-dark" @click="go(obj1)">
						<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
						<span class="pcoded-mtext">{{obj1.name}}</span>
						<span class="pcoded-mcaret"></span>
						</a>
					</li>
				</ul>
			</template>
			<template v-else><!-- 没有子菜单 -->
			   <a href="#" class="waves-effect waves-dark"  @click="go(obj)">
				<span class="pcoded-micon"><i :class="obj.icon"></i><b>N</b></span>
				<span class="pcoded-mtext">{{obj.name}}</span>
				<span class="pcoded-mcaret"></span>
			   </a>
			</template>
        </li>
		
</ul>

</div>
</nav>
<div class="pcoded-content ">
<!--  aspect="1by1" 
 <b-embed id="iframe"
	    type="iframe"
	    tag="div"
	    aspect="1by1"
	    allowfullscreen
	    src="/home.html"
	    class="iframe100"
      ></b-embed> -->
      
 <div class="embed-responsive embed-responsive-1by1 iframe100" >
   <iframe id="iframe" allowfullscreen="allowfullscreen" src="/home.html" class="embed-responsive-item iframe100"></iframe>
 </div>
      
</div>
<div id="styleSelector">
</div>
</div>
</div>
</div>
</div>





<script src ="./resources/js/vue.min.js"></script>
<script src ="./resources/js/bootstrap-vue.min.js"></script>
<script src ="./resources/js/axios.min.js"></script>
<script src ="./resources/js/vue-axios.min.js"></script>
<script src ="./resources/js/app.js"></script>


<script type="text/javascript">
new Vue({
	el   : '#nav',
	data:{
		   user:AppContext.getUser()
    },
	methods:{
		logout:function (){
			this.$http.get("login/out").then((result)=> {
				 window.location.href='index.html';
				 AppContext.deleteUser();
			});
		}
	}
});


new Vue({
	   el   : '#app',
	   mounted:function(){
		   this.reloadMenus(); 
	   },
	   data:{
		   menus:[]
	      ,user:AppContext.getUser()
	   },
	   methods:{
		  go:function(m){
			  if(m.target=='_blank'){
				  window.open ( m.link , m.name ) ; 
				  
			  }else{
				  document.getElementById('iframe').src=m.link;
			  }
			  //设置选中
			  this.menus.forEach((item)=>{
					 //第一个参数是要修改的数据, 第二个值是修改当前数组的哪一个字段,第三个是要修改为什么值
					 this.$set(item, 'isActive', item.name==m.name);
			  });
		  },
		  reloadMenus:function (){
			  this.menus=[
				   {name:'首页 '       ,icon:'ti-home',link:'/home.html',isActive:true}
				  ,{name:'页面模板 '    ,icon:'ti-layout',link:'http://html.phoenixcoded.net/mega-able/default/index.html',target:'_blank'}
				  ,{name:'菜单管理'    ,icon:'ti-layout',link:'sys/menu/list.html'}
				  ,{name:'Mappings'    ,icon:'ti-layout',link:'demo/mappings.html'}
			  ];
			  this.$http.post("reloadMenus",{}).then((result)=> {
				  result.list.forEach(item=>this.menus.push(item));
			  });
		  }
	   }
	   
});
</script>
<script type="text/javascript" src="./resources/files/bower_components/jquery/js/jquery.min.js"></script>
<script type="text/javascript" src="./resources/files/bower_components/popper.js/js/popper.min.js"></script>
<script type="text/javascript" src="./resources/files/bower_components/bootstrap/js/bootstrap.min.js"></script>
<script src="./resources/files/assets/pages/waves/js/waves.min.js"></script>
<script type="text/javascript" src="./resources/files/bower_components/jquery-slimscroll/js/jquery.slimscroll.js"></script>
<script src="./resources/files/assets/js/pcoded.min.js"></script>
<script src="./resources/files/assets/js/vertical/vertical-layout.min.js"></script>
<script src="./resources/files/assets/js/jquery.mCustomScrollbar.concat.min.js"></script> 
<script type="text/javascript" src="./resources/files/assets/js/script.js"></script>
</body>
</html>
